<template>
  <div v-if="hideSearch">
     <div  :class="cn('mx-2 mb-1 mt-2', searchBoxClassName)" @click="e => e.stopPropagation()">
              <Input
                showLeftIcon
                showClearIcon
                v-model:value="searchText"
                placeholder="搜索变量"
                autoFocus
              />
            </div>
            <div  class='relative left-[-4px] h-[0.5px] bg-black/5' :style="{
              width: 'calc(100% + 8px)',
            }"></div>
     </div>
         <div v-if="filteredVars.length > 0" :class="cn('max-h-[85vh] overflow-y-auto', maxHeightClass)">
              <div v-for="(item, i) in filteredVars" :key="i">
                <div
                  class='system-xs-medium-uppercase truncate px-3 leading-[22px] text-text-tertiary'
                  :title="item.title"
                >{{item.title}}</div>
                  <Item v-for="(v, j) in item.vars"
                    :key="j"
                    :title="item.title"
                    :nodeId="item.nodeId"
                    :objPath="[]"
                    :itemData="v"
                    @change="onChange"
                    :itemWidth="itemWidth"
                    :isSupportFileVar="isSupportFileVar"
                    :isException="v.isException"
                    :isLoopVar="item.isLoop"
                  />
            </div>
        </div>
         <div v-if="filteredVars.length == 0" className='pl-3 text-xs font-medium uppercase leading-[18px] text-gray-500'>没有变量</div>
</template>
<script setup lang="ts" name="VarReferenceVars">
import cn from '@/utils/classnames'
import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
import { checkKeys } from '@/utils/var'
import { Input } from 'ant-design-vue'
import {computed, ref} from 'vue';

type Props = {
  hideSearch?: boolean
  searchBoxClassName?: string
  vars: NodeOutPutVar[]
  isSupportFileVar?: boolean
  onChange: (value: ValueSelector, item: Var) => void
  itemWidth?: number
  maxHeightClass?: string
}
const props = defineProps<Props>();
const searchText = ref('');

const filteredVars = computed(()=> {
    props.vars.filter((v) => {
      const children = v.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.') || v.variable.startsWith('env.') || v.variable.startsWith('conversation.'))
      return children.length > 0
     }).filter((node) => {
        if (!searchText.value)
          return node
        const children = node.vars.filter((v) => {
          const searchTextLower = searchText.value.toLowerCase()
          return v.variable.toLowerCase().includes(searchTextLower) || node.title.toLowerCase().includes(searchTextLower)
        })
        return children.length > 0
    }).map((node) => {
      let vars = node.vars.filter(v => checkKeys([v.variable], false).isValid || v.variable.startsWith('sys.') || v.variable.startsWith('env.') || v.variable.startsWith('conversation.'))
      if (searchText.value) {
        const searchTextLower = searchText.value.toLowerCase()
        if (!node.title.toLowerCase().includes(searchTextLower))
          vars = vars.filter(v => v.variable.toLowerCase().includes(searchText.toLowerCase()))
      }
      return {
        ...node,
        vars,
      }
    })
  }) 

</script>

